<template>
  <app-framework :banner.sync="banners">
    <content-container>
      <!--文字说明-->
      <div class="text-desc">
        <h2 class="text-desc_title">专注企业文化建设教育16年 <br/>企业长青DNA打造专业平台</h2>
        <div class="text-desc_content">
          <p>师道知识管理集团是中国领先的企业心力教育培训平台!<br/>致力于培养教导型企业家,打造教导型组织,引领新商业文明崛起。</p>
          <p>师道倡导“企业学校化、领导导师化”的经营理念。<br/>
            培养企业家像导师一样启迪企业成员的智慧,激发企业成员的潜力，<br/>
            让大家能找到自己心灵的归属,获得物质的回报,创建自己的和谐人生。<br/>
            同时通过众智共享、群策群力推动企业可持续发展。</p>
        </div>
        <div class="text-desc_more font-color-note">了解更多<i class="el-icon-d-arrow-right"></i></div>
      </div>
      <div class="flex modules">
        <nuxt-link class="flex-1 module-item" to="/product/business-student">
          <img src="/images/index-dizi.jpg" />
          <h4 class="title">弟子风采<br/>Disciple Exhibition</h4>
        </nuxt-link>

        <nuxt-link class="flex-1 module-item module-middle" to="/product/teach-organization">
          <img src="/images/index-friend.jpg" />
          <h4 class="title">校友风采<br/>Alumni style</h4>
        </nuxt-link>

        <nuxt-link class="flex-1 module-item" to="/about/think">
          <img src="/images/index-teacher.jpg" />
          <h4 class="title">导师思想<br/>Tutor thought</h4>
        </nuxt-link>
      </div>
    </content-container>
    <!--大教室-->
    <div class="class-root">
      <content-container>
        <div class="flex flex-strength class-root_content">
          <div class="flex-1 flex flex-column flex-strength">
            <div class="flex-1"></div>
            <div class="class-root_app-desc">
              <h1 class="title">企业众智共享系统</h1>
              <h2 class="desc">教育引导 以学代管 众智共享</h2>
              <p class="more">在线申请>>></p>
            </div>
            <div class="flex-2"></div>
          </div>
          <div class="flex-1 class-root_app flex flex-column">
            <div class="flex-1"></div>
            <img src="/app.png" alt="">
            <div class="flex-1"></div>
          </div>
        </div>
      </content-container>
    </div>
    <content-container class="books">

      <div class="flex video_title books_left_side">
        <h2 class="flex-1" @click="getBooks">在线云课堂</h2>
        <span>更多>>></span>
      </div>

      <div class="flex flex-strength">
        <video class="video books_left_side" :src="mp4" controls :autoplay="autoplay" poster="video-bg.jpg"></video>
        <div class="flex-1 flex flex-column">
          <div class="flex">
            <div class="flex-1 book-box" v-for="(book, index) of books[0]">
              <img class="book"  :src="book.img" />
              <!--播放暂停按钮-->
              <div class="flex flex-column play-box">
                <div class="flex-1"></div>
                <div>
                  <img v-if="book.mp4 === mp4" class="play-btn" src="/icon/stop.png" />
                  <img v-if="book.mp4 !== mp4" class="play-btn" src="/icon/play.png" @click="changeMp4(book.mp4)" />
                </div>
                <div class="flex-1"></div>
              </div>
            </div>
          </div>
          <div class="flex-1"></div>
          <div class="flex">
            <div class="flex-1 book-box" v-for="(book, index) of books[1]">
              <img class="book"  :src="book.img" />
              <!--播放暂停按钮-->
              <div class="flex flex-column play-box">
                <div class="flex-1"></div>
                <div>
                  <img v-if="book.mp4 === mp4" class="play-btn" src="/icon/stop.png" />
                  <img v-if="book.mp4 !== mp4" class="play-btn" src="/icon/play.png" @click="changeMp4(book.mp4)" />
                </div>
                <div class="flex-1"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </content-container>
  </app-framework>
</template>

<script>
import PageHeader from '../components/PageHeader'
import PageFooter from '../components/PageFooter'
import ContentContainer from '../components/ContentContainer'
import AppFramework from '../components/AppFramework'
import { getBooks } from '../api/index-api'

export default {
  components: {AppFramework, ContentContainer, PageFooter, PageHeader},
  data() {
    return {
      banners: [
        {
          img: '/images/banner-index.jpg'
        }
      ],
      mp4: 'http://media.jdclo.com/video/20210609jixuyigedadan.mp4',
      autoplay: false,
      books: [[], []]
    }
  },
  head() {
    return {
      title: '师道'
    }
  },
  created() {
    this.getBooks()
  },
  methods: {
    changeMp4(mp4) {
      this.mp4 = mp4
      this.autoplay = true
    },
    getBooks() {
      console.log(process.env.APP_BASE_URL)
      getBooks().then(res => {
        const books = res.data.data
        let i = 0
        for (let book of books) {
          this.books[parseInt(i/3)].push(book)
          i++
        }
      }).catch(res => {})
    }
  }
}
</script>

<style lang="scss">


/*文字描述*/
.text-desc{
  margin: 20px 0;
  .text-desc_title{
    color: $color-yellow;
  }

  .text-desc_content p {
    margin-top:20px;
    line-height: 1.7;
  }

  .text-desc_more{
    margin-top: 10px;
  }
}

/*模块*/
.modules{
  .module-item{
    position: relative;
    cursor: pointer;
  }
  .module-middle{
    margin: 0 20px;
  }
  img{
    display: block;width: 100%;
  }
  .title{
    width:100%;
    background:rgba(0,0,0,.4);
    position: absolute;
    bottom: 0;
    padding: 10px;
    color:#fff;
  }
}

/*大教室*/
.class-root{
  margin-top:20px;
  background-image: url("/classroom.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 40vw;
  max-height: 500px;
  color: #fff;
  .content-container {
    height: 100%;
  }
  .class-root_content{
    height: 100%;
  }
  .class-root_app-desc{
    padding-left: 5vw;
    .desc{
      margin-top:15px;
      margin-bottom: 10px;
    }
  }
  .class-root_app{
    text-align: center;
    img{
      display: block;
      margin:auto;
      height: 35vw;
      max-height: 400px;
    }
  }
}

.books{
  padding: 20px 0;
  .video_title{
    margin: 15px 0 10px 0;
  }
  .books_left_side{
    width:60.5%;
    margin-right:15px;
  }
  .video{
    background-color: #999;
    //border: 1px solid #999;
  }

  .book{
    border: 1px solid #ccc;
    display: block;
    width: 100%;
  }
  .book-box{
    margin: 0 15px;
    position: relative;
    &:nth-child(3)
    {
      margin-right: 0;
    }
    .play-box{
      position: absolute;
      height:100%;
      width:100%;
      z-index: 10;
      top:0;
      left:0;
    }
    .play-box:hover {
      background-color: rgba(0,0,0,.5);
    }
    .play-btn{
      width:40px;
      z-index: 100;
      cursor: pointer;
    }
  }

  .book:nth-child(-n + 3) {
    margin-top: 0;
  }
  .book:nth-child(n + 4) {
    margin-bottom:0;
  }
}
</style>
